<!--
 * @Descripttion: 
 * @version: 
 * @Author: Connor
 * @Date: 2020-10-16 11:58:42
 * @LastEditors: Connor
 * @LastEditTime: 2020-10-22 09:53:08
-->
<template>
  <el-tabs v-model="subjectTypeActive" type="card">
    <el-tab-pane
      v-for="(item, index) in subjectTypeMap"
      :key="index"
      :label="m(item)"
    >
      <el-tree
        :data="subjectTypeDataMapJson[index]"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { m } from "@/store/yg/common/local";
import { ajax } from "@/store/yg/common/utils";

export default {
  data() {
    return {
      defaultProps: {
        children: "financeSubjectNodes",
        label: "label"
      },
      subjectTypeActive: 0,
      subjectTypeMap: {},
      subjectTypeDataMapJson: {}
    };
  },
  mounted() {
    this.financeSubjectTree();
  },
  methods: {
    m(k) {
      return m(k);
    },
    // 双击科目事件
    async financeSubjectTree() {
      ajax("financeSubjectTree", {}).then(
        res => {
          console.log(res);
          this.subjectTypeMap = res.subjectTypeMap;
          for (const i in res.subjectTypeDataMapJson) {
            this.sortData(res.subjectTypeDataMapJson[i]);
          }
          this.subjectTypeDataMapJson = res.subjectTypeDataMapJson;
        },
        error => {
          console.log(error);
        }
      );
    },
    handleNodeClick(d, n, l) {
      if (d.financeSubjectNodes) {
        return;
      }
    },
    sortData(data) {
      for (const tmp of data) {
        tmp.label = tmp.financeSubject.no + " " + tmp.financeSubject.name;
        if (
          Object.prototype.toString.call(tmp.financeSubjectNodes) ===
          "[object Array]"
        ) {
          this.sortData(tmp.financeSubjectNodes);
        }
      }
      return data;
    }
  }
};
</script>

<style>
.mail {
  text-align: left;
  padding: 0 20px;
}
.subject_all {
  min-height: 360px;
}
</style>
